<template>
	<view>
		<view class="">
			<view class="top" :style="top_img_height">
				<!-- <image class="top-img" src="../../../static/img/red-top.png" mode=""></image> -->
				<view class="send-avatar">
					<image :src="avatar" v-if="avatar" ></image>
				</view>
			</view>
		</view>
		<view class="basic name">
			{{username}}的红包
		</view>
		<view class="basic blessing">
			{{blessing}}
		</view>
		<view class="basic money">
		{{money}}<span>元</span>
		</view>
		<view class="tip">
			已存入零钱.可用于发红包
		</view>
		<view class="line"></view>
		<view class="tip-money">
			已领取1个，共{{money}}元
		</view>
		<view class="myInfo">
			<image :src="myAvatar" mode=""></image>
			<view class="InfoBox">
				<view class="column">
					<view class="myName">
						{{MyName}}
					</view>
					<view class="date">
						2020-1-1
					</view>
				</view>
				<view class="myName right">
					+{{money}}元
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				blessing:"恭喜发财",
				money:0.01,
				username:"大黑哥",
				myAvatar:'',
				MyName:'',
				avatar:'',
				top_img_height:'height:'
			};
		},
		onLoad(options) {
			let systemInfo = uni.getSystemInfoSync()
			this.top_img_height = this.top_img_height + systemInfo.screenWidth*2.4/2.7 + 'rpx'
			if(options.data){
				let data = JSON.parse(options.data)
				// console.log(data)
				this.username = data.nameCard || data.nick
				this.money = data.money
				this.avatar = data.avatar
			}
			this.myAvatar = JSON.parse(uni.getStorageSync('avatar'))[0] 
			this.MyName = uni.getStorageSync('nickname')
		},
	}
</script>

<style lang="scss">
	view{
		display: flex;
		flex-wrap: wrap;
	}
	
	.column {
		flex-direction: column;
	}
	
	.top{
		width: 750rpx;
		background-image: url(../../../static/img/red-top.png);
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		margin-top: -90rpx;
		position: relative;
	}
	
	
	.send-avatar {
		height: 130rpx;
		width: 130rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		position: absolute;
		bottom: -50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.send-avatar image {
		height: 124rpx;
		width: 124rpx;
		border-radius: 10rpx;
	}
	
	.basic {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.name {
		margin-top: 77rpx;
		font-weight: bold;
		font-size: 34rpx;
	}
	
	.blessing {
		color: #787676;
		font-size: 22rpx;
	}
	
	.money {
		margin-top: 60rpx;
		line-height: 80rpx;
		font-size: 120rpx;
		display: flex;
		align-items: flex-end;
		color: #F65817;
		font-weight: bold;
	}
	
	.money span {
		font-size: 24rpx;
		line-height: 8rpx;
	}
	
	.tip {
		font-size: 18rpx;
		font-family: PingFang SC;
		
		color: #516C9C;
		line-height: 36rpx;
		margin: 0 auto;
		margin-top: 43rpx;
	}
	
	.line {
		width: 750rpx;
		height: 17rpx;
		background: #F2F2F2;
		margin-top: 80rpx;
	}
	
	.tip-money {
		width: 100%;
		height: 108rpx;
		padding-left: 31rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		
		color: #A7A7A7;
		line-height: 108rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}
	
	.myInfo {
		position: relative;
		width: 100%;
		height: 151rpx;
		border-bottom: 1px solid #F1F1F1;
		display: flex;
		align-items: center;
	}
	
	.myInfo image {
		height: 90rpx;
		width: 90rpx;
		border-radius: 15rpx;
		margin-left: 30rpx;
	}
	
	.InfoBox {
		margin-left: 30rpx;
	}
	
	.myName {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		
		color: #151515;
	}
	
	.date {
		font-size: 22rpx;
		font-family: PingFang SC;
		
		color: #AFAFAF;
		margin-top: 17rpx;
	}
	
	.right {
		position: absolute;
		right: 38rpx;
		font-size: 36rpx;
		bottom: 60rpx;
		margin: 0;
	}
	
	.history-tittle {
		margin: 0 auto;
	}
</style>
